<template>
  <view class="menu-container">
    <view class="linear-gradient">
      <navBar />
      <!-- 顶部区域 -->
      <view class="top-area">
        <!-- 搜索栏 -->
        <view class="search-bar">
          <view class="search-input">
            <view class="search-icon"></view>
            <input
              class="search-input"
              placeholder-class="placeholder"
              type="text"
              placeholder="请输入商品名称"
              v-model="searchText"
              @input="searchProducts"
            />
          </view>
        </view>

        <!-- 店铺信息 -->
        <view class="shop-info">
          <view class="shop-detail">
            <view class="shop-name"
              >KKmall京基店2楼188号 <text class="arrow">></text></view
            >
            <view class="shop-distance">
              <image
                class="location-icon"
                src="@/static/qietu/已定位.png"
                mode="aspectFit"
              ></image>
              <text>距离您500m</text>
            </view>
          </view>
          <view class="shop-actions">
            <view class="action-btn active">堂食</view>
            <view class="action-btn">外卖</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 主要内容区 -->
    <view class="content-area">
      <!-- 分类列表 -->
      <scroll-view class="category-list" scroll-y>
        <view 
          v-for="(category, index) in categories" 
          :key="category.id"
          :class="['category-item', currentCategoryIndex === index ? 'active' : '']"
          @click="switchCategory(index)"
        >
          <text>{{ category.name }}</text>
        </view>
      </scroll-view>

      <!-- 商品列表 -->
      <scroll-view class="goods-list" scroll-y>
        <!-- 商品项 -->
        <view 
          class="goods-item" 
          v-for="product in filteredProducts" 
          :key="product.id"
          @click="openSpecsSelector(product)"
        >
          <image
            class="goods-image"
            :src="product.imgUrl"
            mode="aspectFill"
          ></image>
          <view class="goods-info">
            <text class="goods-name">{{ product.name }}</text>
            <text class="goods-spec">规格：{{ product.size }}</text>
            <view class="goods-bottom">
              <text class="goods-price">¥{{ product.price }}</text>
              <view class="select-btn" @click.stop="openSpecsSelector(product)">选规格</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
 
    <!-- 购物车和规格选择组件 -->
    <cart-and-specs 
      ref="cartAndSpecsRef"
      :navigate-to-checkout="goToCheckout"
      @show-cart-details="showCartDetails"
    />
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'; 
import navBar from "@/components/nav-bar/index.vue";
import CartAndSpecs from "@/components/CartAndSpecs/index.vue";
import * as uniApi from "@/common/utils/uni-api";

// 搜索相关
const searchText = ref('');
const searchProducts = () => {
  // 这里实现搜索逻辑
};

// 分类相关
const currentCategoryIndex = ref(0);
const categories = reactive([
  { id: 'new', name: '新品上市' },
  { id: 'lemon', name: '招牌柠檬茶' },
  { id: 'fresh', name: '鲜果柠檬茶' },
  { id: 'refresh', name: '清爽柠檬茶' },
  { id: 'coconut', name: '生椰系列' },
  { id: 'milk', name: '醇香奶茶' },
  { id: 'smoothie', name: '冰沙系列' },
  { id: 'hot', name: '热饮系列' }
]);

// 切换分类
const switchCategory = (index) => {
  currentCategoryIndex.value = index;
};

// 商品数据
const products = reactive([
  {
    id: '1',
    categoryId: 'lemon',
    name: '招牌柠打酱油柠檬茶',
    description: '雷公柠霸气推荐，被"雷击"过的味道！优选广东潮州的凤凰单丛雷打紫，茶汤金亮，高山气韵雄浑勃发，芝兰花香清新悠扬。加入香水柠檬，内敛与清爽激发香气层次。',
    price: 18,
    size: '600ml',
    imgUrl: 'https://img2.baidu.com/it/u=1847215506,997905894&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    id: '2',
    categoryId: 'lemon',
    name: '暴打凤梨鸭屎香柠檬茶',
    description: '雷公柠霸气推荐，被"雷击"过的味道！优选广东潮州的凤凰单丛雷打紫，茶汤金亮，高山气韵雄浑勃发，芝兰花香清新悠扬。加入香水柠檬，内敛与清爽激发香气层次。',
    price: 18,
    size: '600ml',
    imgUrl: 'https://img0.baidu.com/it/u=1231988636,1468877653&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
  },
  {
    id: '3',
    categoryId: 'refresh',
    name: '暴打凤梨冰红茶',
    description: '雷公柠霸气推荐，被"雷击"过的味道！优选广东潮州的凤凰单丛雷打紫，茶汤金亮，高山气韵雄浑勃发，芝兰花香清新悠扬。加入香水柠檬，内敛与清爽激发香气层次。',
    price: 16,
    size: '600ml',
    imgUrl: 'https://img1.baidu.com/it/u=3392835995,346222449&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    id: '4',
    categoryId: 'fresh',
    name: '橙多芬冰红茶',
    description: '雷公柠霸气推荐，被"雷击"过的味道！优选广东潮州的凤凰单丛雷打紫，茶汤金亮，高山气韵雄浑勃发，芝兰花香清新悠扬。加入香水柠檬，内敛与清爽激发香气层次。',
    price: 16,
    size: '600ml',
    imgUrl: 'https://img0.baidu.com/it/u=3778196502,2840227022&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    id: '5',
    categoryId: 'fresh',
    name: '芒果柠檬茶',
    description: '雷公柠霸气推荐，被"雷击"过的味道！优选广东潮州的凤凰单丛雷打紫，茶汤金亮，高山气韵雄浑勃发，芝兰花香清新悠扬。加入香水柠檬，内敛与清爽激发香气层次。',
    price: 15,
    size: '600ml',
    imgUrl: 'https://img2.baidu.com/it/u=3483499803,1352125911&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=497'
  }
]);

// 过滤后的商品列表
const filteredProducts = computed(() => {
  const currentCategory = categories[currentCategoryIndex.value];
  
  if (!searchText.value) {
    // 没有搜索文本，显示当前分类的所有商品
    return products.filter(p => p.categoryId === currentCategory.id);
  } else {
    // 有搜索文本，在所有商品中搜索
    const searchLower = searchText.value.toLowerCase();
    return products.filter(p => 
      p.name.toLowerCase().includes(searchLower) || 
      p.description.toLowerCase().includes(searchLower)
    );
  }
});

// 购物车和规格选择组件引用
const cartAndSpecsRef = ref(null);

// 打开规格选择
const openSpecsSelector = (product) => {
  cartAndSpecsRef.value.openSpecsSelector(product);
};

// 显示购物车详情
const showCartDetails = () => {
  uniApi.navigateTo('/pages/cart/cart');
};

// 跳转到结算页面
const goToCheckout = () => {
  uniApi.navigateTo('/pages/order/confirm');
};

// 页面初始化
onMounted(() => {
  // 可以在这里加载数据
});
</script>

<style lang="scss" scoped>
.linear-gradient {
  background: linear-gradient(
    to right,
    rgba(255, 242, 221, 1) 0%,
    rgba(229, 254, 222, 1) 100%
  );
}
.menu-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 顶部区域样式 */
.top-area {
  padding: 0 30rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  padding-top: 4rpx;
  width: 70%;
  margin-bottom: 60rpx;

  .search-input {
    flex: 1;
    height: 70rpx;
    background-color: #fff;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    .search-input {
      flex: 1;
    }
    .search-icon {
      width: 30rpx;
      height: 30rpx;
      background-image: url("@/static/qietu/search.png");
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 10rpx;
    }

    .placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }

  .action-icons {
    display: flex;
    margin-left: 20rpx;

    .icon-more,
    .icon-scan {
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
    }
  }
}

.shop-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .shop-detail {
    .shop-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 10rpx;

      .arrow {
        font-size: 35rpx;
        color: black;
        margin-left: 10rpx;
      }
    }

    .shop-distance {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;

      .location-icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }
    }
  }

  .shop-actions {
    display: flex;
    border-radius: 30rpx;
    overflow: hidden; 

    .action-btn {
      width: 100rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #b3b3b3;
      background-color: #f6f6f6;

      &.active {
        background-color: #8cc152;
        color: #fff;
      }
    }
  }
}

/* 主要内容区样式 */
.content-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.category-list {
  width: 180rpx;
  height: 100%;
  background-color: #f5f5f5;

  .category-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10rpx;
    border-left: 6rpx solid transparent;

    text {
      font-size: 28rpx;
      color: #333;
      text-align: center;
      line-height: 1.2;
    }

    &.active {
      background-color: #fff;
      border-left-color: #8cc152;

      text {
        color: #8cc152;
        font-weight: 500;
      }
    }
  }
}

.goods-list {
  flex: 1;
  height: 100%;
  background-color: #fff;
  padding: 0 20rpx;

  .goods-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #f5f5f5;

    .goods-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      margin-right: 20rpx;
      background-color: #f9f9f9;
    }

    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-name {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        line-height: 1.3;
      }

      .goods-spec {
        font-size: 24rpx;
        color: #999;
        margin: 10rpx 0;
      }

      .goods-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods-price {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
        }

        .select-btn {
          width: 120rpx;
          height: 60rpx;
          background-color: #8cc152;
          color: #fff;
          font-size: 24rpx;
          border-radius: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>